<template>
	<view class="page" v-if="dataList.length > 0">
		<mescroll-uni @init="mescrollInit" top="24" @down="downCallback" :up="upOption" @up="upCallback"
			@emptyclick="emptyClick">
			<view class="items" v-for="data in dataList">
				<view class="items_top" @click="details(data.id)">
					<view class="fun_row">
						<view class="fun_row_left">
							{{data.carTypeNum}}
						</view>
						<view class="fun_row_right">
							<view class="i" :class="[getStateColor(data.applyStatus)]">
							</view>
							<view class="fun_row_right_title" style="background: none;"
								:class="[getStateColor(data.applyStatus)]">
								{{data.apply}}
							</view>
						</view>
					</view>
					<view class="row" v-if="data.applyStatus==7">
						放款金额：{{data.lendersAmount || ''}}
					</view>
					<view class="row">
						价格：{{data.minPrice || ''}}
					</view>
					<view class="row">
						品牌：{{data.brandName || ''}}  
					</view>
					<view class="row">
						身份证号：{{data.idCardNumber || ''}}
					</view>
					<view class="row">
						申请时间：{{data.createTime || ''}}
					</view>
				</view>
				<view class="items_bum">
					<view class="items_bum_li" @click="tongguo(data.id,1)" v-if="data.applyStatus==3">
						通过
					</view>
					<view class="items_bum_li" @click="jujue(data.id,2)" v-if="data.applyStatus==3">
						拒绝
					</view>
					<view class="items_bum_li" @click="bohuifun(data.id,3)" v-if="data.applyStatus==3">
						驳回
					</view>
					<view class="items_bum_li " @click="details(data.id)" v-if="data.applyStatus!==3">
						查看详情
					</view>
				</view>
				<!-- <view class="details" @click="details(data.id)">
					<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
				</view> -->
			</view>
		</mescroll-uni>
		<u-popup :show="show" mode="center" width="588rpx" height="500rpx" border-radius="20" :round="10">
			<view class="modelBox">
				<view class="modelBox_top">
					<view class="modelBox_top_tip2">
						{{status == 2 ? '请输入拒绝原因' : '请选择驳回原因'}}
					</view>
					<view class="itemsContent" @click="educationShow = true" v-if="status != 2">
						<u-radio-group v-model="refuseCause" placement="column" >
							<u-radio :customStyle="{marginBottom: '8px'}" label="关联征信不良" :name="0" >
							</u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="关联小贷申请较多" :name="1" >
							</u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="关联法院不良" :name="2" >
							</u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="关联小贷不良" :name="3" >
							</u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="其他" :name="4" >
							</u-radio>
						</u-radio-group>
					</view>
					<view class="modelBox_top_content" v-if="status == 2">
						<view class="text" style="min-height: 120px;">
							<u--textarea v-model="refuseCause" placeholder="请输入内容" border="surround" ></u--textarea>
						</view>
					</view>
				</view>
				<view class="modelBox_buttom">
					<view class="b_i" style="width:100%;" @click="quxiao">
						取消
					</view>
					<view class="b_i" style="width:100%;" @click="fun">
						{{status == 2 ? '拒绝' : '驳回'}}
					</view>

				</view>
			</view>
		</u-popup>
	</view>
	<view class="empty" v-else>
		<u-empty mode="data" text="暂无数据">
		</u-empty>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import orderMixin from "@/utils/mixin/orderMixin.js"
	export default {
		mixins: [MescrollMixin, orderMixin],
		data() {
			return {
				id: null,
				educationShow: false,
				status: null,
				refuseCause: '',
				show: false,
				Words: '', //搜索的关键字
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				dataList: [],
				educationColumns: [
					['关联征信不良', '关联小贷申请较多', '关联法院不良', '关联小贷不良', '其他']
				],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 判断状态
			matchState(state = '', reg) {
				return !!String(state).match(reg) //返回true/false
			},
			// 学历弹框确认按钮
			educationConfirm(e) {
				this.refuseCause = e.indexs[0]
				this.educationShow = false
			},
			// 学历弹框取消按钮
			educationCancel() {
				this.educationShow = false
			},
			async getList() {

				//获取练习列表数据
				const res = await this.$post(`/biz/bank/bankInstallments`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount
				})
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dataList = []
					}
					this.dataList = this.dataList.concat(res.data.data.records)
				}
				this.mescroll.endBySize(res.data.data.size, res.data.data.total)
			},
			tongguo(id, status) {
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要审核通过吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.audit(id, status)
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			fun() {
				this.audit(this.id, this.status)
			},
			// 取消
			quxiao() {
				this.show = false
				this.refuseCause = ""
			},
			async audit(id, status) {
				if (this.refuseCause === "" && status != 1) {
					this.$ToastFail(`${this.status == 2 ? '请输入拒绝原因' : '请输入驳回原因'}`)
					return
				}
				const res = await this.$post(`/biz/bank/bankAudit`, {
					installmentId: id,
					status: status,
					refuseCause: this.refuseCause
				})
				if (res.data.code === 200) {
					this.$ToastOk('提交成功')
					this.getList()
					this.refuseCause = ""
					this.show = false
				}
			},

			// 拒绝状态
			jujue(id, status) {
				this.id = id;
				this.status = status
				this.show = true
			},
			// 驳回状态
			bohuifun(id, status) {
				this.id = id;
				this.status = status
				this.show = true
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/yin_hang/details?id=' + id
				})
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: hidden;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.empty {
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.items {
		position: relative;
		width: 690rpx;
		height: 389rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 24rpx auto 0;
	}

	.items_top {
		box-sizing: border-box;
		padding: 0 50rpx;
		width: 100%;
		height: 294rpx;
		overflow: hidden;
	}

	.items_bum {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 94rpx;
		border-top: 2rpx solid #F4F4FA;
	}

	.items_bum_li {

		width: 50%;
		height: 100%;
		font-size: 30rpx;
		font-family: "PingFang SC-Bold, PingFang SC";
		font-weight: bold;
		color: #000000;
		text-align: center;
		line-height: 94rpx;
	}

	.bli {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 94rpx;
		border-top: 2rpx solid #F4F4FA;
	}

	.items_bum .items_bum_li {
		border-right: 2rpx solid #F4F4FA;
	}

	.items_bum .items_bum_li:last-child {
		border-right: none;
	}

	.fun_row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 42rpx;
		margin: 28rpx 0 19rpx;
	}

	.fun_row_left {
		width: 400rpx;
		overflow: hidden;            // 溢出隐藏
		text-overflow: ellipsis;      // 溢出用省略号显示
		white-space: nowrap;         // 规定段落中的文本不进行换行
		font-size: 30rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #000000;
	}

	.fun_row_right_title {
		width: 120rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
	}

	.i {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.fun_row_right {
		display: flex;
		align-items: center;
	}

	.row {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		margin-bottom: 12rpx;
	}

	/* 系统审核的状态颜色,状态为0时 */
	.daishengHeIcon {
		background: #ffaa00;
	}

	.daishengHeTtle {
		color: #ffaa00;
	}

	/* 终核中的状态颜色,状态为1时 */
	.shengHezhongIcon {
		background: #aa5500;
	}

	.shengHezhongTtle {
		color: #aa5500;
	}

	/* 放宽中的状态颜色,状态为2时 */
	.bohuiIcon {
		background: #00aaff;
	}

	.bohuiTtle {
		color: #00aaff;
	}

	/* 已放款的状态颜色,状态为3时 */
	.yifangkuanIcon {
		background: #00ffff;
	}

	.yifangkuanTtle {
		color: #00ffff;
	}

	/* 已驳回的状态颜色,状态为4时 */
	.yibohuiIcon {
		background: #ff9b74;
	}

	.yibohuiTtle {
		color: #ff9b74;
	}

	/* 已拒绝的状态颜色,状态为5时 */
	.yijujueIcon {
		background: red;
	}

	.yijujueTtle {
		color: red;
	}

	.modelBox {
		box-sizing: border-box;
		width: 606rpx;
		/* height: 100%; */
		/* background-color: #00aaff; */
		
	}

	.modelBox_top {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 360rpx;
	}

	.modelBox_buttom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 20%;
		/* background-color: red; */
		border-top: 2rpx solid #eee;
	}

	.modelBox_top_tip {
		width: 100%;
		height: 80rpx;
		text-align: center;
		color: #000;
		font-weight: 700;
		line-height: 70rpx;
		border-bottom: 2rpx solid #eee;
	}
	.modelBox_top_tip2 {
		width: 100%;
		height: 80rpx;
		text-align: center;
		color: #000;
		font-weight: 700;
		line-height: 70rpx;
	}

	.modelBox_top_content {
		width: 100%;
		color: #666;
		/* margin-top: 40rpx; */
	}

	.b_i {
		text-align: center;
		line-height: 78rpx;
	}

	.b_i:active {
		background-color: #ccc;
	}

	.modelBox_buttom .b_i:nth-child(2) {
		color: red;
	}

	.text {
		width: 562rpx;
		box-sizing: border-box;
		margin: 0 auto;
		border: 2rpx solid #eee;
	}

	.details {
		position: absolute;
		right: 0;
		bottom: 50%;
		transform: translate(-50%, -50%);
	}

	.itemsContent {
		width: 100%;
		/* background-color: #00aaff; */
		margin-top: 20rpx;
		padding: 0 52rpx ;
		box-sizing: border-box;
	}
</style>